<template>
<!--  @mousemove="mousemove" -->
    <div id="createDataSource">
        <header id="header">
            <div id="headerLeft">
                <p>数据集{{saveSketchpad.name ? saveSketchpad.name : ''}}</p>
                <a-button
                    type="primary"
                    icon="forward"
                    style="height:24px"
                    v-if="rightStart === true"
                    @click="rightStart = false"
                >
                </a-button>
            </div>
            <div>
             <a-button type="primary" @click="returnBtns" style="margin-right:0.5rem;">
                返回
            </a-button>
            <a-button type="primary" @click="saveSketchpadBtn">
                保存
            </a-button>
            </div>
        </header>
        <main id="main">
            <div id="left" v-if="rightStart === false">
                <div id="top">
                    <span>选择数据源</span>
                    <a-icon
                        type="double-left"
                        @click="rightStart = true"
                        id="icon"
                    ></a-icon>
                </div>

                <div id="bottom">
                    <a-select
                        :default-value="leftValue"
                        style="width: 100%"
                        @change="changeBtn"
                    >
                        <a-select-option
                            v-for="item in optionLeft"
                            :key="item.id"
                            :value="item.id"
                        >
                            {{ item.name }}
                        </a-select-option>
                    </a-select>

                    <p class="text">数据表</p>

                    <a-input-search
                        placeholder="请输入要搜索的数据表/文件"
                        v-model="searchValue"
                        @search="onSearch"
                    />

                    <div id="leftValueBtn">
                        <a-button
                            v-for="item in leftValueList"
                            :key="item.id"
                            :title="item.tableName"
                            v-drag="`${JSON.stringify(item)}`"
                        >
                            <p>
                                <a-icon type="table" />
                                <span>{{ item.tableName }}</span>
                                <span>{{ item.tableAlias }}</span>
                            </p>
                        </a-button>
                    </div>
                    <div>
                        <a-pagination
                            :total="total"
                            v-model="pageNum"
                            :page-size.sync="pageSize"
                            show-less-items
                            @change="pagingChange"
                            id="pagingChange"
                        />
                    </div>
                </div>
            </div>

            <!-- 右侧 -->
            <div id="right">
                <div
                    class="boardTop"
                    id="boardTops"
                    style="position: relative;"
                >
                    <div
                        v-for="(item, index) in this.dataSourceList.tables"
                        :key="Number(item.tableId)"
                        :id="Number(item.tableId)"
                        :style="{
                            position: 'absolute',
                            left: item.x + 'px',
                            top: item.y + 'px'
                        }"
                        icon="table"
                        name="box"
                        class="rightBtn"
                        @contextmenu.prevent="
                            onContextmenu($event, item, index)
                        "
                    >
                        <a-icon type="table" />
                        {{ item.tableName }}
                    </div>
                </div>
                <div class="boardTop" id="boardTop">
                    <div id="boardTopHeader">
                        <a-button type="primary" @click="sqlBtn">
                            查看关联SQL
                        </a-button>
                        <a-button type="primary" @click="calculateViewBtn">
                            计算视图
                        </a-button>
                        <a-button
                            type="primary"
                            @click="newComputingFieldBtn()"
                        >
                            新建计算字段
                        </a-button>
                        <a-button type="primary" @click="globalfileHandle">
                            过滤
                        </a-button>
                    </div>
                    <div id="boardTopBottom">
                        <GeminiScrollbar
                            class="my-scroll-bar"
                            :style="{
                                width: `${offsetWidth}px`,
                                height: '520px',
                                border: '1px solid #eaeaea'
                            }"
                        >
                            <ul>
                                <li class="tableHeader">
                                    <p
                                        class="tableHeaders"
                                        v-for="item in columns"
                                        :key="item.fieldId"
                                    >
                                        <span class="tableHeadersText">{{
                                            item.fieldName
                                        }}</span>
                                        <a-icon
                                            type="setting"
                                            @contextmenu.prevent="
                                                setUpContextmenu($event, item)
                                            "
                                        />
                                    </p>
                                </li>
                                <li
                                    class="tableHeader"
                                    v-for="(item, index) in resultList"
                                    :key="index"
                                >
                                    <p
                                        class="tableHeaders"
                                        v-for="(items, indexs) in Object.keys(
                                            item
                                        )"
                                        :key="indexs"
                                        :title="item[items]"
                                    >
                                        <span>{{
                                            item[items] ? item[items] : ""
                                        }}</span>
                                    </p>
                                </li>
                            </ul>
                        </GeminiScrollbar>
                    </div>
                </div>
            </div>
        </main>

        <a-drawer
            title="构建关联关系模型"
            placement="right"
            :closable="false"
            :destroyOnClose="true"
            :visible="buildModelVisible"
            width="45%"
            id="buildModelVisible"
        >
            <div id="buildModelVisibleTop">
                <div class="buildModelVisibleCenter">
                    <p>{{ leftText }}</p>
                    <div class="buildModelVisibleSearch">
                        <span class="leftText">
                            字段选择 ({{ selectedRowKeysLeft.length }}/{{
                                this.buildModelLeftData.length
                            }})
                        </span>
                        <a-input-search
                            v-model="leftSearchValue"
                            placeholder="请输入关联字"
                            @search="buildModelVisibleLeftSearch"
                        />
                    </div>
                    <div>
                        <a-table
                            :row-selection="{
                                selectedRowKeys: selectedRowKeysLeft,
                                onChange: buildModelLeftChange
                            }"
                            :pagination="false"
                            :columns="buildModelLeftColum"
                            :data-source="buildModelLeftData"
                            :rowKey="
                                (record, index) => {
                                    return record.id;
                                }
                            "
                            :scroll="{ y: 200 }"
                        />
                    </div>
                </div>
                <div class="buildModelVisibleCenter">
                    <p>{{ rightText }}</p>
                    <div class="buildModelVisibleSearch">
                        <span class="leftText">
                            字段选择 ({{ selectedRowKeysRight.length }}/{{
                                buildModelRightData.length
                            }})
                        </span>
                        <a-input-search
                            v-model="rightSearchValue"
                            placeholder="请输入关联字"
                            @search="buildModelVisibleRightSearch"
                        />
                    </div>
                    <div>
                        <a-table
                            :row-selection="{
                                selectedRowKeys: selectedRowKeysRight,
                                onChange: buildModelRightChange
                            }"
                            :pagination="false"
                            :columns="buildModelRightColum"
                            :data-source="buildModelRightData"
                            :rowKey="
                                (record, index) => {
                                    return record.id;
                                }
                            "
                            :scroll="{ y: 200 }"
                        />
                    </div>
                </div>
            </div>

            <div id="buildModelVisibleBottom">
                <div class="buildModelVisibleBottom">
                    <p>
                        数据关联
                    </p>
                    <div>
                        <a-select
                            v-model="dataConnectionValue"
                            style="width: 120px"
                        >
                            <a-select-option
                                :value="item.id"
                                v-for="item in dataConnection"
                                :key="item.id"
                            >
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                        <a-button type="primary" @click="addAssociatedField">
                            添加关联字段
                        </a-button>
                        <a-button type="primary">
                            过滤
                        </a-button>
                    </div>
                </div>

                <div>
                    <ul class="selectDataConnection">
                        <li
                            v-for="(item, index) in dataCorrelationSelect"
                            :key="index"
                        >
                            <a-select
                                style="width: 45%"
                                v-model="item.sourceKey"
                            >
                                <a-select-option
                                    :value="item.id"
                                    v-for="item in buildModelLeftData"
                                    :key="item.id"
                                >
                                    {{ item.fieldName }}
                                </a-select-option>
                            </a-select>

                            <a-select
                                style="width: 45%"
                                v-model="item.targetKey"
                            >
                                <a-select-option
                                    :value="item.id"
                                    v-for="item in buildModelRightData"
                                    :key="item.id"
                                >
                                    {{ item.fieldName }}
                                </a-select-option>
                            </a-select>

                            <a-button
                                type="primary"
                                @click="deleteAssociatedField(item, index)"
                            >
                                删除
                            </a-button>
                        </li>
                    </ul>
                </div>

                <div
                    :style="{
                        position: 'absolute',
                        right: 0,
                        bottom: 0,
                        width: '100%',
                        borderTop: '1px solid #e9e9e9',
                        padding: '10px 16px',
                        background: '#fff',
                        textAlign: 'right',
                        zIndex: 1
                    }"
                >
                    <a-button
                        :style="{ marginRight: '8px' }"
                        @click="cancelDataModelBtn"
                    >
                        关闭
                    </a-button>
                    <a-button type="primary" @click="dataModelBtn">
                        确定
                    </a-button>
                </div>
            </div>
            
            <div class="filter-list">
                <div v-for="(filter,idx) in filterAllList">
                        <div class="filter-condition-parent">
                        <div class="tip-icon" v-show="idx==0 && filterAllList[idx].length">且</div>
                        <div class="tip-icon" v-show="idx==1 && filterAllList[idx].length">或</div>
                        <div class="filter-condition" v-for="(filterItem,idx2) in filter">
                            <a-select v-model="filterItem.andOr" style="width:300px;" @change="andOrChangeHandle(filterItem,idx,idx2)">
                                <a-select-option v-for="andOr in andOrList" :key="andOr.value">
                                    {{ andOr.type }}
                                </a-select-option>
                            </a-select>
                            <a-select v-model="filterItem.tableId" style="width:300px;" @change="handleDatabaseChange">
                                <a-select-option v-for="dbName in testData" :key="dbName.id">
                                    {{ dbName.tableName }}
                                </a-select-option>
                            </a-select>
                            <a-select v-model="filterItem.fieldId" style="width:300px;">
                                <a-select-option v-for="Filed in selectFiledList" :key="Filed.id">
                                    {{ Filed.fieldName }}
                                </a-select-option>
                            </a-select>
                            <a-select v-model="filterItem.functionalOperator" style="width:300px;">
                                <a-select-option v-for="FieldType in filterFieldType" :key="FieldType.value">
                                    {{ FieldType.label }}
                                </a-select-option>
                            </a-select>
                            <a-select :default-value="sortList[0].value" style="width: 60px" v-show="false">
                                <a-select-option v-for="leftReg in leftRegList" :key="leftReg.value">
                                    {{ leftReg.label }}
                                </a-select-option>
                            </a-select>
                            <a-input class="rows-filter-input" v-show="filterItem.FieldType !='notEmpty'" v-model="filterItem.value"/>
                            <a-input class="rows-filter-input"  v-show="false"/>
                            <a-select :default-value="sortList[0].value" style="width: 60px"  v-show="false">
                                <a-select-option v-for="sort in sortList" :key="sort.value">
                                    {{ sort.type }}
                                </a-select-option>
                            </a-select>
                            <a-button style="margin-left:10px;"  type="primary"  @click="filterdeleteHandle(filterItem,idx,idx2)">删除</a-button>
                        </div>
                    </div>
                </div>
                <!---添加按钮-->
                <div>
                    <a-popover title="请选择筛选条件" 
                        trigger="click" 
                        :visible="radioanClicked"
                            class="modal-filter-popover">
                        <template slot="content">
                            <a-radio-group v-model="radioandOr">
                                <a-radio :value="0">
                                    且
                                </a-radio>
                                <a-radio :value="1">
                                    或
                                </a-radio>
                            </a-radio-group>
                            <div class="modal-filter-radio-confirm-btn">
                                <a-button type="primary" size="small" @click="modalRadioConfirmHandle">
                                    确定
                                </a-button>
                            </div>
                        </template>
                        <a-button type="primary" @click="radioanClicked=true">
                            添加筛选条件
                        </a-button>
                    </a-popover>
                </div>
            </div>
        </a-drawer>

        <a-modal
            :title="newComputingFieldTitle == 0 ? '新建计算字段' : '编辑字段'"
            :visible="visibleNewComputingField"
            @ok="newComputingFieldOk"
            @cancel="visibleNewComputingField = false"
            ok-text="确认"
            cancel-text="取消"
            id="NewComputingField"
            width="25%"
        >
            <ul>
                <li>
                    <p>中文名称:</p>
                    <a-input v-model="newComputingFieldList.fieldAlias" />
                </li>
                <li>
                    <p>英文名称:</p>
                    <a-input v-model="newComputingFieldList.fieldName" />
                </li>
                <li>
                    <p>计算方式:</p>
                    <a-select
                        v-model="newComputingFieldList.expressionType"
                        style="width:100%"
                        @change="expressionTypeBtn"
                        :disabled="newComputingFieldTitle == 0 ? false : true"
                    >
                        <a-select-option
                            value="ORIGIN"
                            v-if="newComputingFieldTitle == 1"
                        >
                            源字段
                        </a-select-option>
                        <a-select-option
                            :value="item.id"
                            v-for="item in newComputingFieldSelect"
                            :key="item.id"
                            v-if="item.id != 'ORIGIN'"
                        >
                            {{ item.lable }}
                        </a-select-option>
                    </a-select>
                </li>
                <li
                    v-if="
                        newComputingFieldList.expressionType !== 'CUSTOMIZE' &&
                            newComputingFieldList.expressionType !== 'ORIGIN'
                    "
                >
                    <p>字段计算:</p>
                    <a-select
                        v-model="newComputingFieldList.field"
                        style="width:100%"
                    >
                        <a-select-option
                            :value="JSON.stringify(item)"
                            v-for="(item, index) in fieldSelect"
                            :key="index"
                        >
                            {{ item.fieldName }}
                        </a-select-option>
                    </a-select>
                    <a-select
                        v-model="newComputingFieldList.splicingOperator"
                        style="width:100%"
                        v-if="
                            newComputingFieldList.expressionType === 'CALCULATE'
                        "
                    >
                        <a-select-option
                            :value="item.id"
                            v-for="item in splicingPperator"
                            :key="item.id"
                        >
                            {{ item.value }}
                        </a-select-option>
                    </a-select>
                    <a-input
                        v-model="newComputingFieldList.splicingOperatorValue"
                        placeholder="输入拼接符"
                        disabled
                        v-if="newComputingFieldList.expressionType === 'SPLICE'"
                    />
                    <a-select
                        v-model="newComputingFieldList.fields"
                        style="width:100%"
                    >
                        <a-select-option
                            :value="JSON.stringify(item)"
                            v-for="(item, index) in fieldSelect"
                            :key="index"
                        >
                            {{ item.fieldName }}
                        </a-select-option>
                    </a-select>
                </li>
                <li v-if="newComputingFieldList.expressionType === 'CUSTOMIZE'">
                    <p>字段计算:</p>
                    <a-textarea
                        :rows="4"
                        v-model="newComputingFieldList.expression"
                    />
                </li>
                <li
                    style="display:flex;align-items: end;justify-content: space-between;"
                    v-if="newComputingFieldList.expressionType === 'CUSTOMIZE'"
                >
                    <div id="newComputingFieldLeft">
                        <a-input-search
                            placeholder="请输入要搜索的数据"
                            v-model="newComputingFieldList.searchValue"
                            @search="newComputingFieldSearch"
                        />
                        <div class="bottom">
                            <p>
                                <span>英文名称</span>
                                <span>中文名称</span>
                            </p>
                            <p
                                v-for="item in fieldSelects"
                                :key="item.fieldName"
                                @click="customCalculationBtn(item)"
                            >
                                <span>{{ item.fieldName }}</span>
                                <span>{{ item.fieldAlias }}</span>
                            </p>
                        </div>
                    </div>

                    <div id="newComputingFieldRight">
                        <div class="margin">
                            <p>字段类型</p>
                            <a-radio-group
                                v-model="newComputingFieldList.visualType"
                            >
                                <a-radio
                                    :value="item.id"
                                    v-for="item in checkArray"
                                    :key="item.id"
                                >
                                    {{ item.value }}
                                </a-radio>
                            </a-radio-group>
                        </div>
                        <div class="margin">
                            <p>格式化</p>
                            <a-select
                                v-model="newComputingFieldList.scale"
                                style="width:100%"
                            >
                                <a-select-option
                                    :value="item.id"
                                    v-for="item in formattingArray"
                                    :key="item.id"
                                >
                                    {{ item.value }}
                                </a-select-option>
                            </a-select>
                        </div>
                    </div>
                </li>
            </ul>
        </a-modal>
        <a-modal
            title="过滤"
            :visible="filterModalVisible"
            @ok="filterConfimHandle('modal')"
            @cancel="filterModalVisible=false"
            ok-text="确认"
            :destroyOnClose="true"
            cancel-text="取消"
            id="modelFilter"
            width="50%"
        >
            <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }" >
                <a-form-item label="显示字段：" >
                    <el-select v-model="filterDataIds" 
                        placeholder="请选择"
                        filterable
                        multiple
                        collapse-tags
                        @change="showSelectFileHandle"
                        @remove-tag="removeTagHandle"
                        class="filter-model-show-field"
                        >
                            <el-option-group
                                v-for="group in testData"
                                :key="group.id"
                                :label="group.tableName">
                                <el-option
                                    v-for="item in group.fieldInfoList"
                                    :key="item.id"
                                    :label="item.fieldName"
                                    :value="item.id"
                                    >
                                        <div style="display:flex; justify-content: space-between;">
                                            <span style="float: left">{{ item.fieldName }}</span>
                                            <span style="float: left">{{ item.fieldAlias }}</span>
                                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.sqlType }}</span>
                                        </div>
                                </el-option>
                            </el-option-group>
                    </el-select>
                </a-form-item>
                <a-form-item label="过滤条件：">
                    <div v-for="(filter,idx) in filterAllList">
                        <div class="filter-condition-parent">
                            <div class="tip-icon" v-show="idx==0 && filterAllList[idx].length">且</div>
                            <div class="tip-icon" v-show="idx==1 && filterAllList[idx].length">或</div>
                            <div class="filter-condition" v-for="(filterItem,idx2) in filter">
                                <a-select v-model="filterItem.andOr" @change="andOrChangeHandle(filterItem,idx,idx2)">
                                    <a-select-option v-for="andOr in andOrList" :key="andOr.value">
                                        {{ andOr.type }}
                                    </a-select-option>
                                </a-select>
                                <a-select v-model="filterItem.tableId" @change="handleDatabaseChange">
                                    <a-select-option v-for="dbName in testData" :key="dbName.id">
                                        {{ dbName.tableName }}
                                    </a-select-option>
                                </a-select>
                                <a-select v-model="filterItem.fieldId">
                                    <a-select-option v-for="Filed in selectFiledList" :key="Filed.id">
                                        {{ Filed.fieldName }}
                                    </a-select-option>
                                </a-select>
                                <a-select v-model="filterItem.functionalOperator">
                                    <a-select-option v-for="FieldType in filterFieldType" :key="FieldType.value">
                                        {{ FieldType.label }}
                                    </a-select-option>
                                </a-select>

                                <a-select :default-value="sortList[0].value" style="width: 60px" v-show="false">
                                    <a-select-option v-for="leftReg in leftRegList" :key="leftReg.value">
                                        {{ leftReg.label }}
                                    </a-select-option>
                                </a-select>
                                <a-input class="rows-filter-input" v-show="filterItem.FieldType !='notEmpty'" v-model="filterItem.value"/>
                                <a-input class="rows-filter-input"  v-show="false"/>
                                <a-select :default-value="sortList[0].value" style="width: 60px"  v-show="false">
                                    <a-select-option v-for="sort in sortList" :key="sort.value">
                                        {{ sort.type }}
                                    </a-select-option>
                                </a-select>
                                <a-button style="margin-left:10px;" type="primary" @click="filterdeleteHandle(filterItem,idx,idx2)">删除</a-button>
                            </div>
                        </div>
                    </div>
                    <!---添加按钮-->
                    <div>
                        <a-popover title="请选择筛选条件" 
                            trigger="click" 
                            :visible="radioanClicked"
                           @visibleChange="handleHoverChange"
                             class="modal-filter-popover">
                            <template slot="content">
                                <a-radio-group v-model="radioandOr">
                                    <a-radio :value="0">
                                        且
                                    </a-radio>
                                    <a-radio :value="1">
                                        或
                                    </a-radio>
                                </a-radio-group>
                                <div class="modal-filter-radio-confirm-btn">
                                    <a-button type="primary" size="small" @click="modalRadioConfirmHandle">
                                        确定
                                    </a-button>
                                </div>
                            </template>
                            <a-button type="primary">
                                添加筛选条件
                            </a-button>
                        </a-popover>
                    </div>
                </a-form-item>
                <a-form-item label="排序：">
                    <div class="modal-filter-sort">
                        <el-select v-model="sortDataIds" 
                            placeholder="请选择"
                            filterable
                            multiple
                            collapse-tags
                            @change="sortFileHandle"
                            @remove-tag="removesortTagHandle"
                            >
                                <el-option-group
                                    v-for="group in testData"
                                    :key="group.id"
                                    :label="group.tableName">
                                    <el-option
                                        v-for="item in group.fieldInfoList"
                                        :key="item.id"
                                        :label="item.fieldName"
                                        :value="item.id"
                                        >
                                            <div style="display:flex; justify-content: space-between;">
                                                <span style="float: left">{{ item.fieldName }}</span>
                                            </div>
                                    </el-option>
                                </el-option-group>
                        </el-select>
                        <a-select
                            v-model="sortValue"
                            style="width: 120px"
                        >
                            <a-select-option
                                v-for="sort in sortList"
                                :key="sort.value"
                            >
                                {{ sort.type }}
                            </a-select-option>
                        </a-select>
                        
                    </div>
                </a-form-item>
                <a-form-item label="行数筛选：">
                    <div class="modal-rows-filter">
                        <a-input class="rows-filter-input" v-model="filterLimit" @change="filterlimitHandle"/>
                        <span>（默认输出500行）</span>
                    </div>
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 保存画板--弹窗 -->
        <a-modal
        title="保存数据源"
        :visible="visibleSave"
        @ok="handleSaveOk"
        @cancel="handleCancelSave"
        ok-text="保存"
        cancel-text="取消"
        id="saveSketchpad"
        >
            <ul>
            <li>
                    <span>中文名称</span>
                    <a-input v-model="saveSketchpad.name"/>
                </li>
                <li>
                    <span>英文名称</span>
                    <a-input v-model="saveSketchpad.englishName"/>
                </li>
                <li>
                <span>类型</span>
                <a-select v-model="saveSketchpad.type" style="width:100%">
                    <a-select-option :value="Number(1)">
                        自定义数据集
                    </a-select-option>
                    <a-select-option :value="Number(2)">
                        Excel数据集
                    </a-select-option>
                </a-select>
                </li>
                <li>
                    <span>
                        描述
                    </span>
                    <a-textarea v-model="saveSketchpad.description" :rows="4" />
                </li>
            </ul>
        </a-modal>

        <a-modal title="SQL语句" @ok="visibleSaveSql = false"  :visible="visibleSaveSql"
            @cancel="visibleSaveSql = false"
            ok-text="确定"
            cancel-text="取消">
              {{sqlValue}}
        </a-modal>
    </div>
</template>
<script>
import {
    drawingBoard,
    calculateView,
    drawingBoardSources,
    calculateViewSave,
    drawingBoardSourcesDetail
} from "@/api/dataAnalysis/dataSource";
import { filterFieldType } from "@/assets/js/fieldTypeList";
import { mapGetters } from "vuex";
import { setTimeout } from "timers";
import { Promise } from "q";
import { resolve } from "url";
export default {
    data() {
        return {
            saveSketchpad:{
                description:'',//保存描述
                englishName:'',//英文名称
                name:'',//中文名称
                type:'',//类型
            },
            visibleSave:false,
            rightStart: true,
            calculationStart:false,
            visibleSaveSql:false,
            leftValue: 0,
            connectList: [], //节点数组
            pageNum: 1, //当前页数
            pageSize: 23, //当前条数
            sqlValue: "", //查看关联sql
            selectedRowKeysLeft: [], //左侧表格选项
            leftSearchValue: "", //左侧表格搜索内容
            buildModelVisibleStart: 0,
            dataCorrelationSelect: [], //数据关联下拉框数组
            buildModelLeftColum: [
                {
                    title: "物理字段名",
                    dataIndex: "fieldName",
                    ellipsis: true
                },
                {
                    title: "备注",
                    dataIndex: "fieldAlias",
                    ellipsis: true
                }
            ], //左侧表格表头
            leftText: "", //左侧表名
            buildModelLeftData: [], //左侧表格数据
            rightSearchValue: "", //右侧表格搜索内容
            selectedRowKeysRight: [], //右侧表格选项
            buildModelRightColum: [
                {
                    title: "物理字段名",
                    dataIndex: "fieldName",
                    ellipsis: true
                },
                {
                    title: "备注",
                    dataIndex: "fieldAlias",
                    ellipsis: true
                }
            ], //右侧表格表头
            rightText: "", //右侧表明
            buildModelRightData: [], //左侧表格数据
            total: 0,
            searchValue: "", //搜索的内容
            leftValueList: [], //左侧数据列表
            columns: [], //table表格表头
            resultList: [], //表格数据
            visibleNewComputingField: false,
            dataModelconnt: {},
            fieldSelect: [], //字段数组
            fieldSelects: [],
            offsetWidth: '',
            tables: [],
            dataConnection: [
                { id: "Left", name: "左关联" },
                { id: "inner", name: "内关联" },
                { id: "full", name: "全关联" },
                { id: "right", name: "右关联" }
            ], //连接数据列表
            dataConnectionValue: "Left", //连接数据选中的值
            buildModelVisible: false,
            dataSourceList: {
                fields: [], //所有字段数据
                tables: [], // 表id
                sorts: [], //排序
                links: [], //节点id
                filter: {}, //过滤
                limit: 10
            }, // 全部数据的集合
            splicingPperator: [
                { id: "+", value: "加" },
                { id: "-", value: "减" },
                { id: "*", value: "乘" },
                { id: "/", value: "除" }
            ], //计算字段运算符
            newComputingFieldTitle: 0, //0为新建 1为编辑
            newComputingFieldList: {
                fieldName: "",
                fieldAlias: "",
                fieldId: "", //空
                tableId: "", //表id为空
                expressionType: "SPLICE", //计算表达式
                field: "", //字段1
                fields: "", //字段2
                splicingOperator: "+", //运算符
                splicingOperatorValue: "", //字符串元素符
                expression: "", //字段计算
                searchValue: "", //字段计算搜索
                visualType: "string", // 字段类型
                scale: 0 //格式化
            },
            newComputingFieldSelect: [
                { id: "ORIGIN", lable: "源字段" },
                { id: "CALCULATE", lable: "四则运算" },
                { id: "SPLICE", lable: "字符拼接" },
                { id: "CUSTOMIZE", lable: "自定义计算" }
            ], //新建计算字段下拉框
            checkArray: [
                { id: "string", value: "文本" },
                { id: "number", value: "数值" }
            ], //字段类型
            formattingArray: [
                { id: 0, value: "保留整数" },
                { id: 1, value: "保留一位小数" },
                { id: 2, value: "保留二位小数" }
            ],
            optionLeft: [
                { id: 0, name: "全部" },
                { id: 1, name: "平台源表数据" },
                { id: 2, name: "自定义数据源" }
            ],
            allTableData: [], //全部表数据
            testData: [], // 获取全部表字段
            filterDataIds: "", // 保存全局过滤选中id
            filterData:'',   //保存全局过滤选
            filterLimit:'', // 过滤条数
            sortDataIds:"",  // 保存全局过滤 排序
            sortData:'',
            filterModalVisible: false, // 控制全局过滤弹窗
            form: {},
            sortList: [
                { value: "desc", type: "倒序" },
                { value: "asc", type: "升序" }
            ],
            sortValue:'desc',
            andOrList: [
                { value: "0", type: "且" },
                { value: "1", type: "或" }
            ],
            databaseVal: "",
            selectFiledList: [],
            selectFiled: "",
            dbName: "",
            filterFieldType,
            FieldType:'',
            leftRegList:[{label:'[',value:'0'},{label:'(',value:'1'}],
            filterAllList:[[],[]],
            radioandOr:0,
            radioanClicked:false,
            tableWight:null,
        };
    },
    computed: {
        ...mapGetters(["mapList"])
    },
    mounted() {
        console.log('query',this.$route.query.id)
        this.onSearchList();
        if(this.$route.query.id){
            //编辑入口进入
             this.echoDataBtn()
        }else{
            //新建进入
            this.$nextTick(() => {
                this.creatdJplumb();
            });
        }
        this.$nextTick(() => {
            this.offsetWidth = document.getElementById("boardTop").clientWidth -100
        });
    },
    methods: {
        //回显数据---自定义数据集跳转过来
        echoDataBtn(){
            console.log('createList',this.$route.query.id)
           drawingBoardSourcesDetail(this.$route.query.id).then(res=>{
               console.log('回显',res)
               if(res.code == 200){
                this.saveSketchpad = {
                    englishName:res.data.englishName,
                    description:res.data.description,
                    name:res.data.name,
                    type:res.data.type
                }
                this.dataSourceList = {
                  fields:res.data.fields,
                  tables:res.data.tables,
                  sorts:res.data.sorts,
                  links:res.data.links,
                  filter:res.data.filter,
                  limit:res.data.limit
                }
                // this.filedandSortbackFillfn();
                console.log('后端拿回的数据',this.dataSourceList)
                        this.$nextTick(() => {
                        this.creatdJplumb();
                   
                });
   
               }
           })
        },
        creatdJplumb() {
            this.jsplumb = this.$jsplumb.getInstance({
                PaintStyle: { stroke: "#56A7F9", strokeWidth: 4 }, //连接线的默认样式
                HoverPaintStyle: { stroke: "#13E0F9", strokeWidth: 4 }, //鼠标滑过连线样式
                Endpoint: ["Dot", { radius: 1 }], //连线终端点类型
                EndpointStyle: {
                    fill: "#409EFF", //端点背景色
                    outlineWidth: 1, //端点宽度
                    outlineStroke: "#409EFF", //端点边框线
                    radius: 4 //圆角
                }, //这个是控制连线终端那个小点的样式
                EndpointHoverStyle: { fill: "#fff", outlineStroke: "#13E0F9" }, //这个是控制鼠标滑过连线终端那个小点的样式
                Connector: ["Flowchart"], //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight]
                ConnectionOverlays: [
                    [
                        "Arrow",
                        { location: 1, width: 11, length: 11, foldback: 0.618 }
                    ], //连线设置箭头

                    [
                        "Label",
                        {
                            //连线上设置label
                            location: 0.5, //文字距离两端的位置
                            label: "", //label显示文字-线上的文字
                            id: "label", //连接线的id
                            cssClass: "aLabel", //连接线的class
                            events: {
                                //label点击事件
                                // tap: function () {
                                //   alert("hey");
                                // },
                            }
                        }
                    ]
                ],
                Container: "boardTops", //可拖动区域 ID
                DrapOptions: { cursor: "crosshair", zIndex: 2000 }
            });

            const ins = this.jsplumb; // 实例已经创建成功
            ins.getAllConnections(); //配置重新生效--重置--防止渲染失败
            ins.batch(() => {
                //渲染成功后执行
                this.initAll(); //初始化节点
                this.connectionAll(); //初始化连线
            });
            //所有要做的操作的钩子函数要在这里定义实例执行
            //建立连接---连接成功后的操作
            ins.bind("connection", this.connection);
            //建立连接前---连接前的操作--一般用来判断是否可连接
            ins.bind("beforeDrop", this.beforeDrop);
            //连线变更---移动连线的操作
            ins.bind("connectionMoved", this.connectionMoved);
            //连线断开时的操作
            ins.bind("connectionDetached", this.beforeDetach);
            //双击
            ins.bind("click", this.dblclick);
            this.switchContainer(true, true, true); //允许是否可拖拽、端点是否可用(原点是否可用、终点是否可用、是否可拖拽)
        },

        //初始化所有节点
        initAll() {
            const list = this.dataSourceList.tables;
            for (let row of list) {
                this.init(row);
            }
        },

        // 初始化规则使其可以连线
        init(row) {
            const ins = this.jsplumb;
            const elem = document.getElementById(row.tableId); //获取节点
            let common = {
                isSource: true, //是否可以作为原点
                isTarget: true //是否可以作为目标
            };
            let direction = ["Left", "Right", "Top", "Bottom"]; //方向数组
            for (let item of direction) {
                //设置端点
                ins.addEndpoint(
                    elem,
                    {
                        anchor: item,
                        allowLoopback: false,
                        maxConnections: -1 //连接线数量限制, -1则不限制数量
                    },
                    common
                );
            }
        },

        //建立连线
        connectionAll() {
            const ins = this.jsplumb;
            ins.ready(() => {
                console.log("links数据",this.dataSourceList.links)
                for (let item of this.dataSourceList.links) {
                    this.jsplumb.connect({
                        source:String(item.source), //开始节点
                        target:String(item.target), //结束节点
                        anchor:["Left", "Right", "Top", "Bottom"] //圆点连接方向 这个地方可以动态生成，方向可以存储在你的连线数组内，然后动态赋值
                    });
                }
            });
        },

        //初始化使其可以拖拽
        switchContainer(target, source, draggable) {
            const elem = document.getElementsByName("box"); //获取要生成拖拽实例的节点
            const ins = this.jsplumb; //获取jsplumb实例
            ins.ready(() => {
                let draggables = {
                    containment: "center",
                    drug: event => {
                        window.event
                            ? (window.event.cancelBubble = true)
                            : event.stopPropagation();
                        return false;
                    },
                    stop: event => {
                        //拖拽结束
                        let elem = event.el.tableId; // 当前拖拽节点的id
                        let list = JSON.parse(
                            JSON.stringify(this.dataSourceList.tables)
                        );
                        for (let row of list) {
                            if (elem == row.tableId) {
                                Object.assign(row, {
                                    x: event.pos[0], //拖拽之后改变x轴的位置
                                    y: event.pos[1] //拖拽之后改变y轴位置
                                });
                            }
                        }
                        this.dataSourceList.tables = JSON.parse(
                            JSON.stringify(list)
                        );
                        window.event
                            ? (window.event.cancelBubble = true)
                            : event.stopPropagation();
                        return false;
                    }
                };
                ins.setSourceEnabled(elem, source); //设置是否允许从源目标拖出连线
                ins.setTargetEnabled(elem, target); //设置是否可从终点目标拖出连线
                ins.draggable(elem, draggable ? draggables : false); // 节点是否支持拖拽
            });
        },

        //建立连接之后的事件
        connection(connt) {
            console.log("建立连接后", connt); //connt包含sourceId ，targetId 等值; sourceId为源目标的id，targetId为你要连接的元素的id
            //你可以通过id来获取你想要的元素
            let list = JSON.parse(JSON.stringify(this.dataSourceList.links));
            let isConnt = list.filter(
                x => x.source == connt.sourceId && x.target == connt.targetId
            );
            if (isConnt || isConnt.length == 0) {
                list.push({
                    source:connt.sourceId,
                    target:connt.targetId
                    // startAnchor: connt.endpoints[0].anchor.anchors[0].type, //源点锚点方向
                    // endAnchor: connt.endpoints[1].anchor.anchors[0].type, //终点锚点方向
                });
            }
            this.dataSourceList.links = JSON.parse(JSON.stringify(list));
            this.dataModelconnt = connt;
            this.dataModePublic();
            this.buildModelVisibleStart = 0; // 判断是连线的确认和取消
            this.buildModelVisible = true;
            console.log("建立连接后改变的数据", this.dataSourceList.links);
        },

        //数据处理公共--弹窗
        dataModePublic() {
            let dataModelconntValue = [];
            dataModelconntValue.push(
                this.dataModelconnt.sourceId,
                this.dataModelconnt.targetId
            );
            //构建关系模型两张表的数据
            this.allTableDataBtn(dataModelconntValue).then(data => {
                console.log("data", data);
                this.leftText = data.filter(
                    x => x.id == this.dataModelconnt.sourceId
                )[0].tableName; //左侧表名
                this.buildModelLeftData = []; //左侧表格
                this.selectedRowKeysLeft = []; //左侧选中的
                this.buildModelLeftData = data.filter(
                    x => x.id == this.dataModelconnt.sourceId
                )[0].fieldInfoList;
                this.dataSourceList.fields.forEach((x, index) => {
                    if (x.tableId == this.dataModelconnt.sourceId) {
                        this.selectedRowKeysLeft.push(x.fieldId);
                    }
                });
                this.rightText = data.filter(
                    x => x.id == this.dataModelconnt.targetId
                )[0].tableName; //右侧表名
                this.buildModelRightData = []; //右侧表格
                this.selectedRowKeysRight = [];
                this.buildModelRightData = data.filter(
                    x => x.id == this.dataModelconnt.targetId
                )[0].fieldInfoList;
                console.log("buildModelRightData", this.buildModelRightData);
                this.dataSourceList.fields.forEach((x, index) => {
                    if (x.tableId == this.dataModelconnt.targetId) {
                        this.selectedRowKeysRight.push(x.fieldId);
                    }
                });
                //数据关联
                this.dataCorrelationSelect = [];
                this.dataSourceList.links.forEach(x => {
                    if (
                        x.source == this.dataModelconnt.sourceId &&
                        x.target == this.dataModelconnt.targetId
                    ) {
                        this.dataCorrelationSelect =
                            x.joinKeys || x.joinKeys.length > 0
                                ? x.joinKeys
                                : [];
                    }
                });
                console.log(
                    "dataCorrelationSelect",
                    this.dataCorrelationSelect
                );
            });
            // this.filedandSortbackFillfn();
            this.localbackFillfn([this.dataModelconnt.sourceId,this.dataModelconnt.targetId])
            this.getAllTableData();
        },

        //添加关联字段
        addAssociatedField() {
            let list = { sourceKey: "", targetKey: "" };
            this.dataCorrelationSelect.push(list);
            console.log(
                "this.dataCorrelationSelect",
                this.dataCorrelationSelect
            );
        },

        //删除
        deleteAssociatedField(item, index) {
            this.dataCorrelationSelect.splice(index, 1);
        },

        //处理弹窗数据的方法
        dataModelBtn() {
            let array = []; //表的所有数据
            array.push(...this.buildModelLeftData, ...this.buildModelRightData);
            let arrayId = []; //选中的key
            let selected = []; //选中的数据
            arrayId.push(
                ...this.selectedRowKeysLeft,
                ...this.selectedRowKeysRight
            );
            console.log("array", array);
            console.log("arrayId", arrayId);
            array.forEach(x => {
                arrayId.forEach(y => {
                    if (x.id == y) {
                        selected.push({
                            fieldAlias: x.fieldAlias,
                            fieldId: x.id,
                            fieldName: x.fieldName,
                            sqlType: x.sqlType,
                            tableId: x.tableId,
                            expressionType: x.expressionType
                                ? x.expressionType
                                : "ORIGIN"
                        });
                    }
                });
            });
            console.log("111");
            console.log("se", selected);
            console.log("fie", this.dataSourceList.fields);
            let dataSourceList = JSON.parse(
                JSON.stringify(this.dataSourceList.fields)
            );
            // let arr = [];
            let indesArr = selected.map(x => x.tableId);
            let arr = [...dataSourceList].filter(
                x => !indesArr.includes(x.tableId)
            );
            console.log("arr", arr);
            for (let row of selected) {
                arr.push(Object.assign({}, row));
            }
            this.dataSourceList.fields = JSON.parse(JSON.stringify(arr));
            let dataCorrelationSelect = this.dataCorrelationSelect.every(
                x => x.sourceKey && x.targetKey
            );
            console.log(
                "afg",
                dataCorrelationSelect,
                this.dataCorrelationSelect
            );
            if (dataCorrelationSelect) {
                this.dataSourceList.links.forEach(x => {
                    if (
                        x.source == this.dataModelconnt.sourceId &&
                        x.target == this.dataModelconnt.targetId
                    ) {
                        x.joinKeys = this.dataCorrelationSelect;
                        x.joinType = this.dataConnectionValue;
                    }
                });
                let joinKeys = this.dataSourceList.links.every(
                    x => x.joinKeys.length && x.joinKeys.length > 0
                );
                console.log("joinKey", joinKeys, this.dataSourceList.links)
                if (joinKeys) {
                    this.calculateViewBtn();
                    this.buildModelVisible = false;
                    
                } else {
                    this.$message.info("关系表未关联字段");
                }
            } else {
                this.$message.info("关系表不能为空");
            }

            console.log("dataSourceList", this.dataSourceList.fields);
            console.log("sss", this.dataSourceList);
            this.filterConfimHandle('dataSource')
            // console.log('dataSourceList',this.dataSourceList.fields)
        },

        //取消
        cancelDataModelBtn() {
            if (this.buildModelVisibleStart === 0) {
                console.log(this.dataModelconnt.targetId);
                this.jsplumb.remove(String(this.dataModelconnt.targetId)); //移除节点
                setTimeout(() => {
                    this.jsplumb.ready(() => {
                        this.switchContainer(true, true, true);
                    });
                }, 200);
                this.buildModelVisible = false;
            } else {
                this.buildModelVisible = false;
            }
        },

        //连线移动或者变更事件
        connectionMoved(connt) {
            // 这里返回的是连线前的id
            let sourceId = connt.originalSourceId; //移动前的源目标id id可根据自己设置的id变更 node是我设置的id
            let targetId = connt.originalTargetId; //移动前的目标id
            //将移动之前的连线记录清空
            for (let index in this.dataSourceList.links) {
                if (
                    this.dataSourceList.links[index].source == sourceId &&
                    this.dataSourceList.links[index].target == targetId
                ) {
                    this.dataSourceList.links.splice(index, 1);
                    return false;
                }
            }
            console.log("变更");
            console.log(this.dataSourceList.links);
        },

        //建立连接前
        beforeDrop(connt) {
            console.log("连接前", connt); //connt包含sourceId ，targetId 等值; sourceId为源目标的id，targetId为你要连接的元素的id
            if (connt.sourceId == connt.targetId) return false;
            let list = [];
            list = this.dataSourceList.links.filter(
                x => x.source == connt.sourceId && x.target == connt.targetId
            );
            if (list.length > 0) return false;
            let lists = [];
            lists = this.dataSourceList.links.filter(
                x => x.source == connt.targetId && x.target == connt.sourceId
            );
            if (lists.length > 0) return false;
            return true; //true为允许连接，false为不允许连接
        },

        //连接断开前的操作
        beforeDetach(connt) {
            console.log("连接断开", connt);
            // if (this.isDelete) {
            let dataSourceList = JSON.parse(
                JSON.stringify(this.dataSourceList)
            );
            let links = [];
            let fields = [];
            let tables = [];
            console.log("删除");
            console.log(this.dataSourceList);
            //将移动之前的连线记录清空
            links = dataSourceList.links.filter(
                x => x.source != connt.sourceId && x.target != connt.targetId
            );
            fields = dataSourceList.fields.filter(
                x => x.tableId != connt.targetId
            );
            tables = dataSourceList.tables.filter(
                x => x.tableId != connt.targetId
            );
            dataSourceList = Object.assign(dataSourceList, {
                links: links,
                tables: tables,
                fields: fields
            });
            this.dataSourceList = JSON.parse(JSON.stringify(dataSourceList));
            setTimeout(() => {
                this.jsplumb.ready(() => {
                    // this.initAll();
                    // this.connectionAll();
                    this.switchContainer(true, true, true);
                });
            }, 200);
            // }
            // return true;
        },

        //右键菜单--节点
        onContextmenu(event, row, indexs) {
             console.log('dataSourceList3',this.dataSourceList)
            this.$contextmenu({
                items: [
                    {
                        label: "删除",
                        onClick: () => {
                            let dataSourceList = JSON.parse(
                                JSON.stringify(this.dataSourceList)
                            );
                            let links = [];
                            let fields = [];
                            let tables = [];
                            let isexpressionType = false; //判断fields数组内是否有expressionType字段等于ORIGIN
                            let isEnd = false; //判断是否最后一个节点
                            let isJoinKeys = false; //判断JoinKeys是否存在
                            let length = dataSourceList.links.length; //先获取数组长度
                            let endIndex =
                                !length || length == 0
                                    ? {}
                                    : dataSourceList.links[length - 1]; //获取数组最后一条数据
                            let isExpression = false; //
                            let isExpressions = false;
                            console.log("最后一条数据");
                            console.log(row, dataSourceList);
                            isEnd =
                                endIndex.target == row.tableId ? true : false; //判断当前节点是否为最后一条数据
                                console.log('dataSourceList1',dataSourceList)
                            let list = dataSourceList.fields && dataSourceList.fields.length ? dataSourceList.fields.filter(
                                x => (x.tableId == row.tableId)
                            ) : [];
                            console.log("list", list)
                            isexpressionType = list && list.length ? list.every(
                                x =>
                                    x.tableId == row.tableId &&
                                    x.expressionType != "ORIGIN"
                            ) : false; //判断fields数组内是否存在有tableId与当前节点相同且expressionType字段等于ORIGIN
                            isExpression = list && list.length ? list.every(
                                x =>
                                    x.expression &&
                                    x.expression.includes(`[${item.tableId}]`)
                            ) : false;
                            links = dataSourceList.links && dataSourceList.links.length ? dataSourceList.links.filter(
                                x =>
                                    x.target == row.tableId ||
                                    x.source == row.tableId
                            ) : [];

                            // isJoinKeys = links.every(
                            //     x => x.JoinKeys && x.JoinKeys.length
                            // ); //筛选是否存在JoinKeys
                            console.log("判断条件");
                            console.log(isEnd, endIndex);
                            console.log(
                                isexpressionType,
                                isExpressions,
                                isExpression
                            );
                            console.log(links);
                            console.log(dataSourceList.tables);
                            // &&links &&links.length
                            if (!isexpressionType && links && links.length) {
                                //判断如果不是最后一条数据，不存在expressionType != "ORIGIN" 不存在JoinKeys则无法删除
                                if (!isEnd || !isExpression) {
                                    this.$message.info(
                                        "节点已关联数据，无法被删除"
                                    );
                                    return false;
                                }
                            }
                             let localbackFillfn = this.localbackFillfn(row.tableId)
                              console.log('走到了这里11',localbackFillfn,row.tableId,this.dataSourceList)
                            //   console.log()
                            //判断在过滤中是否存在数据
                            if(this.localbackFillfn(row.tableId)) return this.$message.info("已关联数据");
                            // console.log('走到了这里')
                            if (links && links.length) {
                                //判断是否已连线，连线直接触发删除操作
                                this.jsplumb.remove(String(row.tableId));
                            } else {
                                //负责执行一篇删除数据操作
                                this.jsplumb.remove(String(row.tableId));
                                console.log("数据",dataSourceList.fields);
                                fields = dataSourceList.fields.filter(
                                    x => x.tableId != row.tableId
                                );
                                tables = dataSourceList.tables.filter(
                                    x => x.tableId != row.tableId
                                );
                                // dataSourceList = Object.assign(dataSourceList, {
                                //     tables: tables,
                                //     fields: fields
                                // });
                                dataSourceList.fields = fields;
                                dataSourceList.tables = tables;
                                console.log("执行删除",fields,tables);
                                this.dataSourceList = JSON.parse(
                                    JSON.stringify(dataSourceList)
                                );
                                setTimeout(() => {
                                    this.jsplumb.ready(() => {
                                        this.switchContainer(true, true, true);
                                    });
                                }, 200);
                            }
                        }
                    }
                ],
                event,
                customClass: "class-a",
                zIndex: 3,
                minWidth: 230
            });
            return false;
        },

        //计算表头设置右键
        setUpContextmenu(enent, item) {
            this.$contextmenu({
                items: [
                    {
                        label: "删除",
                        onClick: () => {
                            this.headersDelete(event, item);
                        }
                    },
                    {
                        label: "编辑",
                        onClick: () => {
                            this.newComputingFieldBtns();
                            console.log("点击了编辑");
                            this.newComputingFieldTitle = 1;
                            this.newComputingFieldList = [];
                            this.newComputingFieldList = JSON.parse(
                                JSON.stringify(item)
                            );
                            this.$nextTick(() => {
                                this.visibleNewComputingField = true;
                            });
                        }
                    }
                ],
                event,
                customClass: "class-a",
                zIndex: 3,
                minWidth: 230
            });
            return false;
        },

        //计算视图--表头删除
        headersDelete(event, item) {
            console.log("表头数据", item);
            let dataSourceList = [];
            dataSourceList = JSON.parse(
                JSON.stringify(this.dataSourceList.fields)
            );
            console.log("全部数据", dataSourceList);
            dataSourceList = dataSourceList.filter(
                x => item.fieldId !== x.fieldId
            );
            console.log("删除后的旧数据", dataSourceList);
            this.dataSourceList.fields = dataSourceList;
            console.log("删除后得到的数据", this.dataSourceList);
            this.calculateViewBtn();
            this.$message.success(`删除字段${item.fieldName}成功`, 10);         
        },

        //点击连接线
        dblclick(connt, orignEvent) {
            console.log("双击");
            console.log(connt);
            window.event
                ? (window.event.cancelBubble = true)
                : orignEvent.stopPropagation();
            this.dataModelconnt = connt;
            this.dataModePublic();
            this.buildModelVisibleStart = 1; // 判断是连线的确认和取消
            this.buildModelVisible = true;
            return false;
        },

        //分页
        pagingChange(item) {
            console.log(item);
            this.pageNum = item;
            this.onSearchList();
        },
        //搜索
        onSearch() {
            this.pageNum = 1;
            this.onSearchList();
        },

        //获取列表数据
        onSearchList() {
            let list = {
                content: this.searchValue,
                type: this.leftValue,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            };
            let leftValueList = [];
            drawingBoard(list).then(res => {
                console.log(res.data);
                leftValueList = res.data.records;
                this.leftValueList = leftValueList;
                this.total = res.data.total;
            });
        },

        //表数据表头数据--全部
        allTableDataBtn(item) {
            let tableIds = {
                tableIds: item.toString()
            };
            return Promise((resolve, reject) => {
                drawingBoardSources(tableIds)
                    .then(res => {
                        this.allTableData = res.data;
                        console.log(res.data);
                        resolve(res.data, "13212132123123123");
                    })
                    .catch(() => {
                        reject(false);
                    });
            });
        },

        //下拉框
        changeBtn(item) {
            this.leftValue = item;
            this.onSearch();
        },

        // //计算窗口
        // mousemove() {
        //     this.offsetWidth = document.querySelector(
        //         "#boardTopBottom"
        //     ).offsetWidth;
        //     if (this.offsetWidth < 1500) {
        //         this.offsetWidth = this.offsetWidth - 350;
        //     } else {
        //         this.offsetWidth = this.offsetWidth - 50;
        //     }
        // },

        //计算视图
        calculateViewBtn() {
            console.log(this.offsetWidth);
            let links = [];
            let fields = [];
            let tableId = [];
            let tableIds = [];
            links = this.dataSourceList.links && this.dataSourceList.links.length ? JSON.parse(JSON.stringify(this.dataSourceList.links)) : [];
            tableIds =this.dataSourceList.tables && this.dataSourceList.tables.length ? JSON.parse(JSON.stringify(this.dataSourceList.tables)) : [];
            fields =this.dataSourceList.fields && this.dataSourceList.fields.length ? JSON.parse(JSON.stringify(this.dataSourceList.fields)) : [];
            if (links.length == 0 && tableIds.length == 1) {
                tableIds = tableIds.filter((x,index)=>index == 0)
                tableId = tableIds.map(x=>x.tableId)
                console.log('tableId',tableId)
                console.log('fields',fields)
                fields =  fields.filter(x=>tableId.includes(x.tableId))
                this.dataSourceList.fields = fields
                this.dataSourceList.tables = tableIds
            } else {
                let source =[];
                let target = []
                source = links.map((x,index)=> index == 0 && x.source)
                target = links.map((x,index)=> x.target);
                let targetTable = []
                targetTable.push(...source,...target)
                tableIds = tableIds.filter(x=>!targetTable.includes(x.tableId))
                console.log('links',links)
                console.log('tableIds+',tableIds)
                console.log('targetTable',targetTable)
                if(tableIds.length > 0 && links.length == 0){
                    console.log("数据，", )
                    return this.$message.info('数据未关联')
                }
            }
            let list = this.dataSourceList;
            //请求
            calculateView(list)
                .then(res => {
                    console.log(res.data);
                    if (res.code === 200) {
                        this.columns = res.data.fields;
                        let resultList = res.data.resultList;
                        let list = [];
                        let columnsBox = JSON.parse(
                            JSON.stringify(res.data.fields)
                        );
                        //取出数据
                        this.resultList = res.data.resultList;
                        this.sqlValue = res.data.sql;
                        this.calculationStart = true
                        console.log("计算数据");
                        console.log(this.columns);
                        console.log(this.resultList);
                    } else {
                        this.resultList = [];
                        this.sqlValue = "";
                        this.calculationStart = false
                    }
                })
                .catch(() => {
                    this.columns = [];
                    this.resultList = [];
                    this.sqlValue = "";
                     this.calculationStart = false
                });
        },

        //获取sql语句
        sqlBtn() {
            this.calculateViewBtn();
            this.visibleSaveSql = true          
        },

        //新建计算字段弹窗--打开
        newComputingFieldBtn() {
            this.newComputingFieldList = {
                fieldName: "",
                fieldAlias: "",
                fieldId: "", //空
                tableId: "", //表id为空
                expressionType: "SPLICE", //计算表达式
                field: "", //字段1
                fields: "", //字段2
                splicingOperator: "+", //运算符
                splicingOperatorValue: "||", //字符串元素符
                searchValue: "", //字段计算搜索
                expression: "",
                visualType: "string", // 字段类型
                scale: 0 //格式化
            };
            this.newComputingFieldBtns();
        },
        //新建计算字段弹窗-处理方法
        newComputingFieldBtns() {
            let tableId = [];
            let tableIds = [];
            let list = [];
            let links = [];
            links = JSON.parse(JSON.stringify(this.dataSourceList.links));
            tableIds = JSON.parse(JSON.stringify(this.dataSourceList.tables));
            console.log();
            if (tableIds.length == 0)
                return this.$message.error("请拖入一张表在新建计算字段");
            if (links.length == 0) {
                console.log("tableIds", tableIds);
                tableId = tableIds.map((x, index) => index == 0 && x.tableId);
            } else {
                for (let index in links) {
                    let row = links[index];
                    if (index === 0) {
                        list.push(row.source);
                    } else {
                        list.push(row.target);
                    }
                }
                console.log("links", list);
                tableId = Array.from(new Set(list));
            }
            this.newComputingFieldTitle = 0;
            this.visibleNewComputingField = true;
            let fieldInfoList = [];
            console.log("tableId", tableId);
            this.allTableDataBtn(tableId).then(data => {
                data.forEach(x => {
                    fieldInfoList.push(...x.fieldInfoList);
                });
                //计算字段字段名
                this.fieldSelect = [];
                this.fieldSelect = JSON.parse(JSON.stringify(fieldInfoList));
                this.fieldSelects = JSON.parse(JSON.stringify(fieldInfoList));
                console.log("fieldInfoList", fieldInfoList);
            });
        },

        //计算字段搜索
        newComputingFieldSearch() {
            let fieldSelect = [];
            fieldSelect = JSON.parse(JSON.stringify(this.fieldSelect));
            if (this.newComputingFieldList.searchValue) {
                let fieldSelects = [];
                fieldSelects = fieldSelect.filter(
                    x => x.fieldName == this.newComputingFieldList.searchValue
                );
                this.fieldSelects = fieldSelects;
                console.log(this.fieldSelect);
            } else {
                this.fieldSelects = JSON.parse(JSON.stringify(fieldSelect));
                console.log(this.fieldSelect);
            }
        },

        //新建计算字段弹窗--自定义计算字段拼接
        customCalculationBtn(item) {
            this.newComputingFieldList.expression =
                this.newComputingFieldList.expression +
                `[${item.tableId}].${item.fieldName}`;
        },

        //新建字段计算切换
        expressionTypeBtn() {
            this.newComputingFieldList.fieldId = "";
            this.newComputingFieldList.tableId = "";
            this.newComputingFieldList.field = "";
            this.newComputingFieldList.fields = "";
            this.newComputingFieldList.splicingOperator = "+";
            this.newComputingFieldList.splicingOperatorValue = "||";
            this.newComputingFieldList.searchValue = "";
            this.newComputingFieldList.expression = "";
            this.newComputingFieldList.visualType = "string";
            this.newComputingFieldList.scale = 0;
            console.log("newComputingFieldList", this.newComputingFieldList);
        },

        //新建计算字段弹窗-提交
        newComputingFieldOk() {
            let field = this.newComputingFieldList.field
                ? JSON.parse(this.newComputingFieldList.field)
                : "";
            let fields = this.newComputingFieldList.fields
                ? JSON.parse(this.newComputingFieldList.fields)
                : "";
            console.log("1");
            if (this.newComputingFieldList.expressionType == "CALCULATE") {
                this.newComputingFieldList.expression = `[${field.tableId}].${field.fieldName}${this.newComputingFieldList.splicingOperator}[${field.tableId}].${field.fieldName} `;
                console.log(this.newComputingFieldList.expression);
            } else if (this.newComputingFieldList.expressionType == "SPLICE") {
                this.newComputingFieldList.expression = `[${field.tableId}].${field.fieldName}${this.newComputingFieldList.splicingOperatorValue}[${field.tableId}].${field.fieldName} `;
            }
            this.newComputingFieldList.fieldId =
                new Date().getTime() + Math.ceil(Math.random() * 10);
            let dataSourceList = [];
            dataSourceList = JSON.parse(JSON.stringify(this.dataSourceList));
            dataSourceList.fields.push(this.newComputingFieldList);
            console.log('newComputingFieldList',this.newComputingFieldList)
            console.log('dataSourceList',dataSourceList)
             console.log('dataSourceListfields', dataSourceList.fields)
            this.dataSourceList = dataSourceList;
            console.log('dataSourceList+',this.dataSourceList)
            // this.calculateViewBtn(); //里面的判断影响了dataSourceList
            this.visibleNewComputingField = false;
        },

        //建立关系模型--左侧选项事件
        buildModelLeftChange(item) {
            console.log(item);
            this.selectedRowKeysLeft = item;
        },

        //建立关系模型--右侧选项事件
        buildModelRightChange(item) {
            console.log(item);
            this.selectedRowKeysRight = item;
        },

        //建立关系模型左侧搜索
        buildModelVisibleLeftSearch() {
            let list = [];
            if (!this.leftSearchValue) {
                this.buildModelLeftData = this.allTableData.filter(
                    x => x.id == this.dataModelconnt.sourceId
                )[0].fieldInfoList;
            } else {
                list = this.allTableData.filter(
                    x => x.id == this.dataModelconnt.sourceId
                )[0].fieldInfoList;
                let lists = list.filter(
                    x =>
                        x.tableId == this.dataModelconnt.sourceId &&
                        this.leftSearchValue == x.fieldName
                );
                this.buildModelLeftData = lists;
            }
        },

        //建立关系模型右侧搜索
        buildModelVisibleRightSearch() {
            let list = [];
            if (!this.rightSearchValue) {
                this.buildModelRightData = this.allTableData.filter(
                    x => x.id == this.dataModelconnt.targetId
                )[0].fieldInfoList;
            } else {
                list = this.allTableData.filter(
                    x => x.id == this.dataModelconnt.targetId
                )[0].fieldInfoList;
                let lists = list.filter(
                    x =>
                        x.tableId == this.dataModelconnt.targetId &&
                        this.rightSearchValue == x.fieldName
                );
                this.buildModelLeftData = lists;
            }
        },
        getAllTableIds(data){
            var arr = []
            if(data.length){
                data.forEach(res=>{
                    arr.push(res.tableId)
                })
            } else {
                return data
            }
            return arr;
        },
        getAllTableData(){
            this.allTableDataBtn(this.getAllTableIds(this.dataSourceList.tables)).then(res=>{
                this.$nextTick(()=>{
                    this.testData = res
                })
            })
        },
        //全局过滤按钮
        globalfileHandle() {
            if(this.$route.query.id){
                // this.$set(this.testData,this.dataSourceList.fields)
                this.getAllTableData()
                this.filterModalVisible = true;
                this.filedandSortbackFillfn()
            }else {
                 this.filterModalVisible = true;
            }
            
        },
        // 显示筛选字段
        showSelectFileHandle(selectAll){
            var arr = []
            for(var i=0;i<selectAll.length;i++){
                this.testData.forEach((item)=>{
                    item.fieldInfoList.forEach((itemChild)=>{
                        if(selectAll[i] == itemChild.id) {
                            arr.push(itemChild)
                            return;
                        }
                    });
                });
            }
            this.filterData = arr
            // 回显只需要将id 赋值给this.filterData
        },
         // 显示筛选字段
        sortFileHandle(selectAll){
            var arr = []
            for(var i=0;i<selectAll.length;i++){
                this.testData.forEach((item)=>{
                    item.fieldInfoList.forEach((itemChild)=>{
                        if(selectAll[i] == itemChild.id) {
                            arr.push({fieldId:itemChild.id,tableId:itemChild.tableId})
                            return;
                        }
                    });
                });
            }
            this.sortData = arr
            // 回显只需要将id 赋值给this.filterData
        },
        removesortTagHandle(){

        },
        removeTagHandle(item) {
            console.log(item, 13213212312132);
        },
        handleDatabaseChange(item) {
            for (var i = 0; i < this.testData.length; i++) {
                if (item == this.testData[i].id) {
                    this.selectFiledList = this.testData[i].fieldInfoList;
                }
            }
        },
        andOrChangeHandle(item,idx,idx2){
            // 0  标识且   1 标识或
            //  {value:'0',type:'且'},
            // {value:'1',type:'或'}，
            if(item.andOr == 0) {
                item.andOr= "0"
                this.filterAllList[0].push(item);
                this.filterAllList[1].splice(idx2,1);
            }
            if(item.andOr == 1) {
                item.andOr= "1"
                this.filterAllList[1].push(item)
                this.filterAllList[0].splice(idx2,1)
            }
        },
        modalRadioConfirmHandle(){
            this.radioanClicked = false;
            if(this.radioandOr == 0) {
                this.filterAllList[0].push({andOr:"0",tableId:"",fieldId:"",functionalOperator:'',value:''})
            } else {
                this.filterAllList[1].push({andOr:"1",tableId:"",fieldId:"",functionalOperator:'',value:''})
            }
        },
        // 删除
        filterdeleteHandle(item,idx,idx2){
            this.filterAllList[idx].splice(idx2,1);
        },
        sortSelectHandle(){
            if(this.sortData) {
                this.sortData.forEach(res=>{
                    res.sortType = this.sortValue
                })
                this.dataSourceList.sorts = this.sortData;
            }
        },
        handleHoverChange(type){
            this.radioanClicked =type
        },
        // 发送过滤条件数据组装
        filterConfimHandle(type){
            // 0  标识且   1 标识或
            var filterAllList='';
            filterAllList = Object.assign([],this.filterAllList)
            filterAllList.forEach((res,idx,arr)=>{
                if(!res.length){
                   arr.splice(idx,1)
                    return;
                }
            })
            var filter = new Object();
            if(filterAllList.length && filterAllList.length == 1){
                if(filterAllList[0].length == 1) {
                    filter.filterItem = filterAllList[0][0]
                } else {
                     filterAllList.forEach((res,idx)=>{
                        var filters = new Array()
                        res.forEach((child)=>{
                            filters.push(new Object({filterItem:child}))
                        })
                        filter.filters = filters
                    })
                }
            } else {
                filter.filters = new Array();
                filterAllList.forEach((res,idx)=>{
                    var filters = new Array()
                    res.forEach((child)=>{
                        filters.push(new Object({filterItem:child}))
                    })
                    filter.filters.push({filters:filters,logicalOperator:idx == 0?'and':'or'})
                })
            }
            if(type != "modal") {
                this.dataSourceList.filter = filter;
            }else {
                this.dataSourceList.filter = filter;
                if(this.filterData) {
                    this.dataSourceList.fields = this.filterData
                }
                this.dataSourceList.limit = this.filterLimit
                this.sortSelectHandle();
            }
            this.filterModalVisible = false;
            this.calculateViewBtn();
        },
        // 过滤条件回填
        backFillfn(data){
            if(this.isObj(data) != 'obj' || !data){
                return data
            }
            // 0 且 and    1 或 or
            this.$set(this.filterAllList,0,[]);
            this.$set(this.filterAllList,1,[])
           if(this.isObj(data) == 'obj' && data.filterItem){
                if(data.logicalOperator == 'and') {
                    this.filterAllList[0].push(data.filterItem)
                } else {
                    this.filterAllList[1].push(data.filterItem)
                }
            }
            if(data.filters && Array.isArray(data.filters)){
                data.filters.forEach(res=>{
                    if(res.logicalOperator == 'or') {
                        res.filters.forEach(orItem=>{
                            this.filterAllList[1].push(orItem.filterItem)
                        })
                    }
                    if(res.logicalOperator == 'and') {
                        res.filters.forEach(orItem=>{
                            this.filterAllList[0].push(orItem.filterItem)
                        })
                    }

                })
            }
        },
        // 字段和排序回显
        filedandSortbackFillfn(){
            let {sorts,fields,limit,filter} = this.dataSourceList
            // this.backFillfn()
            if(filter.length) {
                this.backFillfn(filter)
            }
            if(sorts.length) {
                this.sortDataIds = []
                this.sortValue = sorts[0].sortType
                sorts.forEach(res=>{
                    this.sortDataIds.push(res.fieldId)
                }) 
            }
            if(fields.length) {
                this.filterDataIds= []
               fields.forEach(res=>{
                    this.filterDataIds.push(res.fieldId)
                }) 
            }
            if(limit) {
                this.filterLimit = limit
            }
        },
        //局部过滤回显
        localbackFillfn(ids){
            // 141 105
            var data = [[],[]]
            console.log(111111)
            this.backFillfn(this.dataSourceList.filter);
            if(ids.length){
                ids.forEach(idsItem=>{
                    this.filterAllList.forEach((res,idx)=>{
                        res.forEach((resChild,idx2)=>{
                            if(resChild.tableId == idsItem) {
                                data[idx].push(resChild)
                            }
                        })
                    }) 
                })

                this.filterAllList = data;
            }
            if(this.isNum(ids)) {
                var hasIds = false
                this.filterAllList.forEach((res,idx)=>{
                    res.forEach((resChild,idx2)=>{
                        if(resChild.tableId == ids) {
                            console.log(resChild.tableId,ids,'resChild.tableId,idsresChild.tableId,ids')
                            return hasIds = true;
                        }
                    })
                })
                console.log(hasIds,'hasIdshasIdshasIds')
                return hasIds;
            }
        },
        isObj(data){
            if(Object.prototype.toString.call(data) ==="[object Object]"){
                return 'obj';
            }
        },
        isStr(str){
            str =  str.toString()
            if(Object.prototype.toString.call(str) ==="[object String]"){
                return true
            }
        },
        isArr(arr){
            if(Object.prototype.toString.call(arr) ==="[object Array]"){
                return true
            }
        },
        isNum(value){
            return typeof value === 'number' && !isNaN(value);
        },
        //  limit 限制输入
        filterlimitHandle(){
            this.filterLimit=this.filterLimit.replace(/\D|^0/g,'')
        },
        //保存---将整个画板打开
        saveSketchpadBtn(){
            this.visibleSave = true;
        },
        //保存---将整个画板数据提交
        handleSaveOk(){
             let list = {
                 id:this.$route.query.id ? this.$route.query.id  : '',
                 requestDTO:{
                   ...this.saveSketchpad,
                   ...this.dataSourceList,
                 }
             }
             calculateViewSave(list).then(res=>{
                 if(res.code == 200){
                     this.$message.success(res.msg);
                     this.$router.push({path:'/dataAnalysis/DataSource'})
                 }else{
                      this.$message.error(res.msg);
                 }
             })
        },
        //取消--将整个画板数据取消
        handleCancelSave(){
            if(!this.$route.query.id){
                this.saveSketchpad = {
                englishName:'',
                description:'',
                name:'',
                type:'',
                }
            }
            this.visibleSave = false;
        },
        //返回
        returnBtns(){
                this.$confirm('确定返回?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                   this.$router.push({path:'/dataAnalysis/DataSource'})
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
                });
        }
    },
    beforeDestroy() {
        this.jsplumb.deleteEveryConnection();
        this.jsplumb.deleteEveryEndpoint();
    },

    watch: {
        mapList: {
            handler(newName) {
                let fields = [];
                let tables = [];
                console.log("1");
                console.log(newName);
                let tmpTables = JSON.parse(
                    JSON.stringify(this.dataSourceList.tables)
                );
                if (newName.id) {
                    newName.fieldInfoList.forEach(x => {
                        if (!x.expressionType) {
                            Object.assign(x, { expressionType: "ORIGIN" });
                        }
                        {
                            fields.push({
                                fieldAlias: x.fieldAlias,
                                fieldId: x.id,
                                fieldName: x.fieldName,
                                sqlType: x.sqlType,
                                tableId: x.tableId,
                                expressionType: x.expressionType
                            });
                        }
                    });
                    tables.push({
                        tableName: newName.tableName,
                        tableId: newName.id,
                        x: newName.x,
                        y: newName.y
                    });
                    let duplicate = this.dataSourceList.tables.map(
                        x => x.tableId
                    );
                    console.log("duplicate", duplicate);
                    console.log("id", newName.id);
                    if (duplicate.includes(newName.id)) {
                        this.$message.error("已有重复节点,无法放置");
                    } else {
                        this.dataSourceList.fields.push(...fields);
                        console.log(
                            "this.dataSourceList.fields",
                            this.dataSourceList.fields
                        );
                        this.dataSourceList.tables.push(...tables);
                        this.dataSourceList.tables.forEach((x, index) => {
                            if (index === 0) {
                                Object.assign(x, { factTable: true });
                            } else {
                                Object.assign(x, { factTable: false });
                            }
                        });
                        console.log('tables',this.dataSourceList.tables)
                        this.$nextTick(() => {
                            this.jsplumb.ready(() => {
                                this.initAll();
                                this.switchContainer(true, true, true);
                            });
                        });
                         
                        if (this.dataSourceList.tables.length === 1) {
                            this.calculateViewBtn();
                        }
                    }
                }
            },
            deep: true,
            immediate: true
        },
    }
};
</script>

<style lang="scss" scoped>
#createDataSource {
    background: white;
    .ant-layout-header {
        background: white;
    }
    #header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 1rem 1rem;
        border-bottom: 1px solid #eaeaea;
        p {
            margin-bottom: 0;
            font-size: 1.4rem;
            font-weight: 600;
            margin-right: 0.5rem;
        }
        #headerLeft {
            display: flex;
            align-items: center;
        }
    }
    #main {
        width: 100%;
        background: white;
        display: flex;
        padding: 0.3rem;
        box-sizing: border-box;
        border-top: 1px solid #eaeaea;
        #left {
            width: 300px;
            border: 1px solid #eaeaea;
            #top {
                display: flex;
                justify-content: space-between;
                padding: 0.8rem;
                align-items: center;
                .anticon-double-left {
                    font-weight: 600;
                    font-size: 1.2rem;
                }
            }
            #bottom {
                width: 100%;
                padding-top: 0.5rem;
                padding: 0.5rem 0.5rem 0 0.5rem;
                box-sizing: border-box;
                border-top: 1px solid #eaeaea;
                .text {
                    padding: 0.5rem 0.5rem 0.5rem 0rem;
                    color: rgb(0, 122, 204);
                    border-bottom: 1px solid rgb(0, 122, 204);
                }
                #leftValueBtn {
                    border: 1px solid #eaeaea;
                    .ant-btn {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        margin-top: 0.5rem;
                        p {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            margin-bottom: 0;
                        }
                        span {
                            margin-left: 0.5rem;
                        }
                    }
                }
                #pagingChange {
                    display: flex;
                    justify-content: center;
                    margin-top: 0.5rem;
                }
            }
        }
        #right {
            width: 100%;
            padding: 0.5rem 0.5rem;
            box-sizing: border-box;
            .boardTop {
                width: 100%;
                height: 35.5rem;
                border: 1px solid #eaeaea;
                .rightBtn {
                    width: auto;
                    padding: 0.5rem 1rem;
                    background: #409eff;
                    color: white;
                    cursor: pointer;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            #boardTopHeader {
                padding: 0.5rem;
                .ant-btn {
                    margin-right: 0.5rem;
                }
            }
        }
        #boardTopBottom {
            display: flex;
            justify-content: center;
            ul {
                list-style: none;
                padding: 0;
                width: 75%;
                height: 30rem;
                .tableHeader {
                    display: flex;
                    cursor: pointer;
                    .tableHeaders {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        flex: 0 0 200px;
                        padding: 0.5rem 0;
                        border: 1px solid #eaeaea;
                        margin-bottom: 0;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        position: relative;
                        .anticon-setting {
                            position: absolute;
                            right: 0;
                            z-index: 333;
                            background: white;
                            width: 35px;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                    }
                }
            }
        }
    }
}
</style>

<style lang="scss">
#NewComputingField {
    .ant-modal-body {
        padding: 0px 24px;
    }
    ul {
        list-style: none;
        padding-left: 0;
        li {
            display: flex;
            align-items: center;
            margin-top: 1rem;
            flex-wrap: wrap;
            p {
                width: 7rem;
                margin-bottom: 0;
                text-align: left;
            }
            .ant-select,
            .ant-input {
                margin-top: 0.5rem;
            }
        }
    }
    #newComputingFieldLeft {
        width: 50%;
        border: 1px solid #eaeaea;
        box-sizing: border-box;
        padding: 0.2rem;
        .ant-input-suffix {
            margin-top: 0.2rem;
        }
        .bottom {
            margin-top: 0.4rem;
            height: 15rem;
            overflow-y: auto;
            p {
                width: 100%;
                display: flex;
                border: 1px solid #eaeaea;
                cursor: pointer;
                span {
                    display: block;
                    width: 50%;
                    text-align: center;
                    padding: 0.3rem 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                span:first-child {
                    border-right: 1px solid #eaeaea;
                }
            }
        }
    }
    #newComputingFieldRight {
        width: 48%;
        border: 1px solid #eaeaea;
        box-sizing: border-box;
        padding: 0.3rem 0.5rem;
        .margin {
            margin-top: 0.5rem;
        }
    }
}
#buildModelVisible {
    #buildModelVisibleTop {
        display: flex;
        justify-content: space-between;
        .buildModelVisibleCenter {
            width: 49%;
            border: 1px solid #eaeaea;
            p {
                margin-bottom: 0;
                padding: 0.5rem;
            }
            .buildModelVisibleSearch {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 0.5rem 0.5rem 0.5rem;
                box-sizing: border-box;
                border-bottom: 1px solid #eaeaea;
                .leftText {
                    display: inline-block;
                    width: 200px;
                }
                .anticon {
                    margin-bottom: 0.1rem;
                }
            }
        }
    }
    #buildModelVisibleBottom {
        .buildModelVisibleBottom {
            p {
                margin-bottom: 0;
                font-size: 1.05rem;
            }
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            .ant-btn {
                margin-left: 0.5rem;
            }
        }
    }

    .filter-list{
        margin-top:20px;
    }

    .selectDataConnection {
        list-style: none;
        width: 100%;
        margin: 0 0 0;
        padding: 0;
        li {
            display: flex;
            justify-content: space-between;
            margin-top: 0.8rem;
        }
    }
}
.modal-filter-radio-confirm-btn{
    margin-top:10px;
    text-align: right;
}
#saveSketchpad{
    ul{
        list-style: none;
        li{
            span{
                display: inline-block;
                margin-bottom:0.5rem;
                margin-top:0.5rem;
            }
            .ant-select-arrow{
                margin-bottom:0!important;
                margin-top:0!important;
            }
        }
    }
}
</style>

// 过滤弹框
<style lang="scss" scoped>
.modal-filter-sort,
.modal-rows-filter,
.filter-condition {
    display: flex;
    align-items: center;
}
.modal-rows-filter .rows-filter-input {
    width: 50%;
    align-items: center;
}
.filter-model-show-field {
    width:100%;
}
.filter-condition-parent{
    border-left:1px solid #ddd;
    position: relative;
    margin-bottom:20px;
    margin-left:6px;
    .filter-condition{
        padding-left:20px;
        margin-bottom:8px;
    }
    .tip-icon {
        position: absolute;
        left: -10px;
        top: 50%;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border: 1px solid rgb(64, 190, 75);
        background: rgb(210, 233, 3);
        border-radius: 50%;
    }
}
</style>
